import React, { useCallback, useState } from 'react';
import { Common } from 'UtilsCommon';
import { Link } from 'Configs';
import Base from './base';

export default (props) => {
    const { property, view, pageAxis } = Base.getProps(props);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [value, setValue] = useState(property.value || property.defaultValue || property.imgUrl);

    property.setIsVisible = (v) => setIsVisible(v);
    property.setValue = (v) => setValue(v);
    property.setLoading = (v) => { property.loading = v; };

    const clickAction = useCallback(() => {
        if (property.loading) return;
        if (property.eventActionName) pageAxis.invokeEventAction(property.eventActionName, { property, view, pageAxis });
        else if (property.eventAction) pageAxis.invokeEventAction2(property.eventAction, { property, view, pageAxis });
    }, [property, view, pageAxis]);

    if (!isVisible) return null;

    const { imgWidth, imgHeight, isSelect, isDiv, className, eventActionName, isOpenLook, eventAction, width, height, alignItems, cssAnimation, justifyContent, isButton, linkUrl } = property;

    const style = property.style ? { ...property.style } : {};

    if (!style.display && (alignItems || justifyContent)) style.display = "flex";
    if (width) style.width = width;
    if (height) style.height = height;
    if (alignItems) style.alignItems = alignItems;
    if (justifyContent) style.justifyContent = justifyContent;

    let onClick;
    if (eventActionName || eventAction) onClick = clickAction;

    const imgStyle = Common.getStyle(property.imgStyle ? { ...property.imgStyle } : {});
    if (imgWidth) imgStyle.width = imgWidth;
    if (imgHeight) imgStyle.height = imgHeight;
    if (!isSelect && value) {
        imgStyle.backgroundImage = `url(${value})`;
        if (!imgStyle.backgroundSize) imgStyle.backgroundSize = '100% 100%';
    }

    if (cssAnimation && cssAnimation.invokeContent) {
        const as = JSON.parse(cssAnimation.invokeContent);
        for (const key in as) imgStyle[key] = as[key];
    }

    const imgClassName = [];
    if (isButton) imgClassName.push("buttonActive");

    if (linkUrl) {
        if (linkUrl.toLowerCase().indexOf('http') >= 0) {
            return <div className={className} style={style}>
                <a className={imgClassName.join(' ')} href={linkUrl} style={imgStyle}></a>
            </div>;
        }
        else {
            return <div className={className} style={style}>
                <Link className={imgClassName.join(' ')} to={linkUrl} style={imgStyle}></Link>
            </div>;
        }
    }

    if (isDiv) {
        return <div className={className} style={style}>
            {isSelect && isOpenLook && <a href={value} target='_blank'><img className={imgClassName.join(' ')} onClick={onClick} src={value} style={imgStyle} /></a>}
            {isSelect && !isOpenLook && <img className={imgClassName.join(' ')} onClick={onClick} src={value} style={imgStyle} />}
            {!isSelect && <div className={imgClassName.join(' ')} onClick={onClick} style={imgStyle}></div>}
        </div>;
    }

    if (isSelect) {
        if (isOpenLook) return <a href={value} target='_blank'><img className={imgClassName.join(' ')} onClick={onClick} src={value} style={imgStyle} /></a>;
        return <img className={imgClassName.join(' ')} onClick={onClick} src={value} style={imgStyle} />;
    }

    return <div className={imgClassName.join(' ')} onClick={onClick} style={imgStyle}></div>;
};